Case Study — System Blueprint

Lead Generation Funnel and Direct Booking Calendar

The Upper Room at Azure North Staycation - Lead Generation, Booking Calendar with Payment receipt verification, and Automated Gmail Notification

I

Introduction

The Upper Room at Azure North is a premier Christian-themed sanctuary staycation suite located in Barbados Tower 2610, Azure North, San Fernando, Pampanga, Philippines. Created by hosts Crisselle Joy & Francisnasser, the property is designed to provide families, couples, and traveling groups a peaceful sanctuary where faith meets genuine Filipino hospitality.

Like many boutique short-term rental operators, the property originally relied heavily on third-party Online Travel Agencies (OTAs) such as Airbnb and Agoda. While these platforms provided initial discoverability, they extracted between 15% to 20% in platform commissions on every stay, strictly shielded guest contact information, and offered zero mechanisms to convert casual social media visitors into loyal direct clients.

This project was engineered to establish a complete direct-to-guest booking engine and digital acquisition ecosystem. From a 10% welcome voucher funnel (index.html) to an interactive 3-step booking calendar (Booking.html), automated GCash downpayment proofs, and a serverless Google Workspace backend (Codepromo.gs)—the entire system operates with zero ongoing monthly software overhead.

II

Operational Challenges

Prior to engineering this bespoke system, the unit owners encountered several operational bottlenecks, revenue leaks, and administrative hurdles that constrained property scalability.

01

Severe OTA Commission Drag (15%–20% Revenue Loss)

Relying exclusively on commercial OTA platforms cut heavily into operational profit margins while preventing the hosts from establishing direct relationships with their returning clientele.

02

Scattered Inquiries & Response Lag

Inquiries arrived across Facebook Messenger, Instagram DMs, and personal phone calls. Late responses during busy hours led prospective guests to book competing units at Azure North.

03

Calendar Double-Booking Anxiety

Without an automated, centralized calendar synchronization engine, checking dates required manually cross-referencing paper notes and chats, risking overlapping reservation promises.

04

Zero Fence-Sitter Lead Capture

Social media ad visitors who were interested but not ready to book immediately bounced without leaving contact information, causing marketing expenditures to leak away untracked.

05

Clunky Manual GCash Payment Verification

Guests sent unstandardized payment screenshots through personal chat threads. Staff had to manually verify reference numbers and match bank transactions with no centralized audit trail.

06

Unstructured Government ID Handling

Collecting guest IDs via informal social messages raised serious compliance concerns under the Philippines Data Privacy Act of 2012 (RA 10173) with zero secure document storage.

III

Solution Implementation

To eliminate manual overhead and third-party fees, a unified direct-booking web application was engineered, pairing high-converting static frontends with an asynchronous, serverless Google Cloud & Google Workspace backend.

Lead Magnet
10% Welcome Voucher Generator (index.html): Engineered a high-converting lead capture gateway that mints single-use cryptographic voucher tokens (e.g. UPR-XXXXXX). Captures guest name, mobile, and email while immediately pre-populating discounts in the booking wizard.
Showroom Experience
Warm Luxury Showcase & Amenity Tour (home.html): Crafted a responsive brand narrative showcasing Azure North's world-class wave pool, unit amenities, verified testimonials marquee, and an interactive floating FAQ widget (FAQwidget.html) answering common questions 24/7.
Booking Engine
3-Step Dynamic Reservation Wizard (Booking.html): Developed an interactive date picker featuring automated pricing logic (📅 Weekdays Rate (Mon–Thu) ₱2,800 / night Includes 2 pax • ➕ ₱250 per extra pax, and 📅 Weekend Rate (Fri–Sun) ₱3,000 / night Includes 2 pax • ➕ ₱300 per extra pax). Includes flexible downpayment options (₱500 reservation hold, 50% deposit, or full payment).
Media Storage
Base64 to Google Drive Cloud Storage: Built a zero-CORS client-side compression pipeline. Guest government IDs and GCash payment screenshots are safely converted to Base64, transmitted via Apps Script, and stored as public viewable blobs in dedicated Google Drive folders.
Serverless Database
Structured 6-Tab Google Sheets CRM: Normalized operational database tabs—Leads, Bookings, Checkouts, BlockedDates, Holidays, and Settings—enabling real-time pipeline management without recurring database subscription fees.
Automated Dispatch
6-Stream Automated HTML Email Notifications: Integrated transactional email dispatching via the Gmail API. Delivers instant booking confirmations to guests with check-in instructions while dispatching detailed booking alerts with 1-click verification links directly to host inboxes.
HTML5 + CSS3 + Vanilla JS Google Apps Script (Codepromo.gs) Antigravity IDE Gemini AI Google Sheets Database Google Drive API
IV

Measurable Results

₱0
Monthly SaaS Fees
Zero recurring overhead on Google Workspace & Netlify
20%
Commission Saved
Eliminated intermediary cuts on direct-to-host bookings
100%
Double-Booking Guard
Real-time calendar lockouts prevent date overlaps
< 3m
Turnaround Time
Instant automated email confirmation & host alert
6
Database Streams
Structured sheets tracking leads, bookings & reviews
24/7
Self-Service Intake
Autonomous guest capture running around the clock
01. Direct Revenue Expansion: By directing social media traffic to the proprietary web funnel rather than third-party portals, the hosts keep 100% of guest payments, increasing per-booking profitability by 15%–20%.
02. Zero Administrative Friction: Dynamic calendar pricing automatically computes weekend surges, extra adult charges, and kids passes, eliminating tedious manual quotes and negotiation back-and-forth.
03. Growing Direct Marketing Asset: The 10% welcome voucher magnet captures hundreds of qualified traveler contacts, creating a high-converting audience for holiday retargeting and off-peak promotions.
04. Elevated Guest Trust & Hospitality: From transparent breakdown calculators to automated HTML check-in vouchers and a smooth review portal (Thankyou.html), the guest experience matches five-star hotel standards.
Built Behind the Scenes

Automation Workflow Framework

Phase 1
Lead Voucher Magnet Flow
index.html
10% Welcome Voucher Form
Codepromo.gs
Webhook Promo Generator
Google Sheets
Logs into Leads Tab
Gmail API
Voucher to Guest + Host Alert

How the Lead Voucher Magnet Works

Visitors landing from targeted social campaigns are presented with an instant incentive: a 10% Off Welcome Voucher. Rather than bouncing as anonymous traffic, prospects enter their name, phone, and email.

The Google Apps Script backend executes submitLead(), mints a verified single-use promo code (e.g. UPR-XXXXXX), logs the lead into the Google Sheets CRM, and immediately dispatches an automated HTML voucher email to the guest while sending a new lead alert to the hosts.

Phase 2
Live Booking & Payment Flow
Booking.html
3-Step Calendar & Pay Engine
Google Drive
Base64 Guest IDs & Receipts
Google Sheets
Bookings Tab + Promo Burn
Gmail Engine
Guest Receipt + Host Dispatch

How the Booking & Payment Flow Works

Guests choose open dates on the live interactive calendar. Pricing dynamically computes based on day tier (📅 Weekdays Rate Mon–Thu ₱2,800 / night for 2 pax • ➕ ₱250/extra pax, and 📅 Weekend Rate Fri–Sun ₱3,000 / night for 2 pax • ➕ ₱300/extra pax), extra adult headcount, and kids policies.

Before booking confirmation, guests upload their government-issued ID and scan the host's GCash QR code to submit proof of downpayment. The files are converted to Base64 in real-time, uploaded directly into private Google Drive folders, and recorded into Google Sheets—burn-locking any claimed promo voucher code so it cannot be reused.

Phase 3
Checkout & Review Loop
Thankyou.html
Checkout Survey & Photo Review
Google Drive
Guest Stay Memories Storage
Google Sheets
Checkouts Tab Rating Log
FB Page Review
1-Click Viral Testimonial CTA

How the Checkout & Review Loop Works

Following checkout, guests are prompted via email and QR card to complete a frictionless satisfaction survey on Thankyou.html. Guests rate room cleanliness, ambiance, and host communication, with an option to upload favorite staycation photos.

The submission triggers submitCheckout(), logs the feedback into the Checkouts database tab, notifies the hosts of guest sentiment, and gently routes delighted guests to leave a verified 5-star review on the official Facebook Page.